<template>
	<view>
		<view class="signInTop">
			<view class="img-box">
				<image src="../../static/images/header.png" mode=""></image>
			</view>
			
			<view class="nameBox">
				<view class="name">
					{{userInfo.nickName}}
				</view>
				<view class="group">
					考勤组：{{userInfo.deptName}}
				</view>
				
			</view>
			
			<view class="date-box">
				<view class="date">{{curDate}}</view>
				<view class="week">{{week}}</view>
			</view>
			
		</view>
		
		
		<view class="content">
		    <ren-calendar ref='ren' :markDays='markDays' :headerBar='false' @onDayClick='onDayClick'></ren-calendar>
		</view>
		
		<view class="block">
			<view class="accountNum" v-if="sginInData.length!=0">
				开户数：<text class="num">{{filterCategory?filterCategory:0}}</text>
			</view>
			<view class="accountNum" v-if="sginInData.length!=0">
				签到数：<text class="num">{{openNum}}</text>
			</view>	
			 
			 <view class="no" v-if="sginInData.length==0">
				 你今天还未签到~
			 </view>
		</view>
		
		
		
		<view class="contentList" v-for="(item,index) in sginInData">
			<view class="title">
				<view class="timeBox">{{filter.getDateTime(item.checkinTime)}}</view>
				<view class="tit">
					{{item.visitMerchantName}}
				</view>
			</view>
			
			<view class="list">
				<view class="list-tit">
					拜访客户
				</view>
				<view class="list-con">
					{{item.visitMerchantName}}
				</view>
			</view>
			<view class="list">
				<view class="list-tit">
					签到地址
				</view>
				<view class="list-con">
					{{item.gpsAddress}}{{item.address}}
				</view>
			</view>
			<view class="list">
				<view class="list-tit">
					是否开户
				</view>
				<view class="list-con">
					{{item.registerStatus==1?'是':'否'}}
				</view>
			</view>
			<view class="list">
				<view class="list-tit cl">
					备注
				</view>
				<view class="list-con">
					{{item.remark}}
				</view>
			</view>
			
			<view class="con">
				<view class="list-tit">
					门头照片
				</view>
				<view class="con-img">
					<!-- ../../static/images/personalCenterBg.png -->
					<image :src="item.img" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	
		<view class="noSginIn" v-if="sginInData.length==0">
			<image src="../../static/images/noSgin.png" mode=""></image>
		</view>
	</view>
</template>
<script module="filter" lang="wxs" src="../../wxs/time.wxs"></script>
<script>
	const util = require("../../utils/util.js");
	//获取应用实例
	const api = require("../../config/api.js"); 
	import orderList from "../../components/orderList/orderList"; 
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
		export default {
			components:{
				RenCalendar
			},
			data() {
				return {
					curDate:'',
					// 用于显示签到天数
					markDays:[],
					week:'',
					Month:'',
					userInfo:{},
					sginInData:[],
					day:'',
					// 业务员id
					userId:'',
					// 签到数
					openNum:'',
					// 开户数
					filterCategory:''
					// signInMonth:[1,3,4,6,8,13,16,18]
				}
			},
			
			onPullDownRefresh() {
			
				
			},
			onLoad(json){
				
				this.userId = json.userId
			},
			onShow() {
				this.doHandleDate();
				
				this.getMonthStatistical(this.Month);
				
				this.getDayCheckList(this.day)
			},
			 onReady() {
				let today = this.$refs.ren.getToday().date;
				this.curDate = today;
				this.week = this.$refs.ren.getToday().week
				this.markDays.push(today);
			},
			methods: {
				onDayClick(e){
					console.log(e)
					// 日期
					this.curDate = e.date;
					// 星期
					this.week = e.week;
					// 签到明细记录
					this.getDayCheckList(this.curDate)
				},
				// 获取签到月统计(经理)
				getMonthStatistical(e){
					util.request(api.checkMonthStatistics, {
						month:e,
						userId:this.userId?this.userId:0
					}, 'POST').then(res => {
						console.log(res)
						if(res.error==0){
							var myDate = new Date();
							var tYear = myDate.getFullYear();
							var tMonth = myDate.getMonth();
							var day = myDate.getDate(); 
							var m = tMonth + 1;
							if (m.toString().length == 1) {
							    m = "0" + m;
							}
							if(day.toString().length == 1){
								day = "0" + day
							}
							var Getday = tYear +'-'+ m;
							// 业务员数据
							this.userInfo = res.data.userInfo;
							this.dayInfos = res.data.dayInfos
							// 获取交易天数
							for(let i=0;i<this.dayInfos.length;i++){
								if(this.dayInfos[i].day.toString().length == 1){
									this.dayInfos[i].day = "0" + this.dayInfos[i].day
								}
								this.dayInfos[i].day = Getday+'-'+this.dayInfos[i].day
								this.markDays.push(this.dayInfos[i].day)
							}
							
							
							console.log(this.dayInfos)
							
						}
						
					})
				},
				// 签到明细记录
				getDayCheckList(e){
					console.log(e)
					util.request(api.dayCheckList, {
						day:e,
						userId:this.userId?this.userId:0
					}, 'POST').then(res => {
						console.log(res)
						if(res.error==0){
							// 业务员数据
							this.sginInData = res.data.data;
							// 签到数
							this.openNum = res.data.count;
							// 开户数
							this.filterCategory = res.data.filterCategory;
						}
					
					
					})
				},
				// 获取月份
				doHandleDate() {
				    var myDate = new Date();
				    var tYear = myDate.getFullYear();
				    var tMonth = myDate.getMonth();
					var day = myDate.getDate(); 
				    var m = tMonth + 1;
				    if (m.toString().length == 1) {
				        m = "0" + m;
				    }
					if(day.toString().length == 1){
						day = "0" + day
					}
					this.Month = tYear +'-'+ m;
					
					this.day = tYear +'-'+ m +'-'+ day
					
					console.log(this.day)
				}

			}
		}

</script>

<style>
	@import url("./signinMonth.css");
</style>
